<script setup lang="ts">
import CommonOtherInfoTable from '@/views/project-update/month-report/common-other-info-table.vue'
import CommonBaseInfoTable from '@/views/project-update/month-report/common-base-info-table.vue'
import { computed, onMounted, ref } from 'vue'

const props = defineProps({
  y: String,
  m: String,
  rN: String,
  status: String,
})

const regionName = ref()
const year = ref('')
const month = ref('')
const unit = ref('')
const userName = ref('')
const time = ref('')

onMounted(() => {
  year.value = props.y || ''
  month.value = props.m || ''
  regionName.value = props.rN || ''
})

const stageOptions = ref([
  { label: '储备阶段', value: 'reserve' },
  { label: '实施阶段', value: 'implement' },
  { label: '运营阶段', value: 'manage' },
])

const baseInfoTableProps = ref([
  {
    label: '区县',
    key: 'regionName',
    renderType: 'text',
  },
  {
    label: '项目名称',
    key: 'projectName',
    renderType: 'text',
  },
  {
    label: '2024年开工完工目标',
    key: 'completeTarget',
    renderType: 'input',
    placeholder: '请输入',
  },
  {
    label: '当前项目阶段',
    key: 'projectStage',
    renderType: 'render',
  },
  {
    label: '计划总投资（亿元）',
    key: 'planTotalInvestment',
    renderType: 'input',
    disabled: true,
  },
  {
    label: '累计计算投资（亿元）',
    key: 'addCompleteInvestment',
    renderType: 'input',
    placeholder: '请输入',
  },
  {
    label: '2024年度计划完成投资（亿元）',
    key: 'yearPlanTotalInvestment',
    renderType: 'input',
    disabled: true,
  },
  {
    label: '年初至本月计划完成投资（亿元）',
    key: 'monthPlanTotalInvestment',
    renderType: 'input',
    placeholder: '请输入',
  },
  {
    label: '累计更新完成改造面积（万平方米）',
    key: 'totalUpdateChangeArea',
    renderType: 'input',
    placeholder: '请输入',
  },
  {
    label: '2024年更新完成改造面积（万平方米）',
    key: 'addUpdateChangeArea',
    renderType: 'input',
    placeholder: '请输入',
  },
  {
    label: '业主单位联系人',
    key: 'unitPeople',
    renderType: 'input',
    placeholder: '请输入',
  },
  {
    label: '业主单位联系方式',
    key: 'unitConcat',
    renderType: 'input',
    placeholder: '请输入',
  },
])

const integrationProjectTableProps = ref([
  {
    label: '入统项目名称',
    prop: 'projectName',
    type: 'input',
  },
  {
    label: '入统行业代码',
    prop: 'projectNo',
    type: 'input',
  },
  {
    label: '其中：累计入统金额（亿元）',
    prop: 'totalInvestment',
    type: 'input',
  },
  {
    label: '年初截至本月入统金额（亿元）',
    prop: 'addInvestment',
    type: 'input',
  },
])

const bankAuthorizationTableProps = ref([
  {
    label: '授权银行',
    prop: 'bankName',
    type: 'input',
  },
  {
    label: '授权额度（亿元）',
    prop: 'creditLimit',
    type: 'input',
  },
  {
    label: '累计放款（亿元）',
    prop: 'addInvestment',
    type: 'input',
  },
  {
    label: '贷款年限',
    prop: 'yearLimit',
    type: 'input',
  },
  {
    label: '年利率',
    prop: 'yearRate',
    type: 'input',
  },
])

const otherFinancingTableProps = ref([
  {
    label: '融资方式',
    prop: 'financeWay',
    type: 'input',
  },
  {
    label: '融资金度（亿元）',
    prop: 'financeInvestment',
    type: 'input',
  },
  {
    label: '到位金额（亿元）',
    prop: 'income',
    type: 'input',
  },
])

const suggestionTableProps = ref([
  {
    label: '序号',
    prop: 'index',
    type: 'index',
  },
  {
    label: '需要市级协调的问题及建议',
    prop: 'suggestion',
    type: 'input',
  },
])

const baseInfoTableRef = ref(null)
const projectCompleteInfoTableRef = ref(null)
const bankInfoTableRef = ref(null)
const financeInfoTableRef = ref(null)
const problemInfoTableRef = ref(null)

const getSubmitData = () => {
  const projectMonthPlanInfo = baseInfoTableRef.value.getFilledFormData()
  projectMonthPlanInfo.peStage = oldStage.value
  projectMonthPlanInfo.projectStage = newStage.value
  return {
    projectMonthPlanInfo,
    projectMonthProjectCompleteInfoList:
      projectCompleteInfoTableRef.value.getTableData(),
    projectMonthBankInfoList: bankInfoTableRef.value.getTableData(),
    projectMonthFinanceInfoList: financeInfoTableRef.value.getTableData(),
    projectMonthProblemInfoList: problemInfoTableRef.value.getTableData(),
  }
}

const oldStage = ref('reserve')
const newStage = ref('reserve')

const inputData = (data: Record<string, any>) => {
  if (!data) return
  baseInfoTableRef.value.inputData(data.projectMonthPlanInfo)
  projectCompleteInfoTableRef.value.setTableData(
    data.projectMonthProjectCompleteInfoList
  )
  bankInfoTableRef.value.setTableData(data.projectMonthBankInfoList)
  financeInfoTableRef.value.setTableData(data.projectMonthFinanceInfoList)
  problemInfoTableRef.value.setTableData(data.projectMonthProblemInfoList)
  const baseInfo = data?.projectMonthPlanInfo || {}
  regionName.value = baseInfo.regionName || ''
  year.value = baseInfo.year || ''
  month.value = baseInfo.month || ''
  userName.value = baseInfo.createUserName || ''
  time.value = baseInfo.createTime || ''
  oldStage.value = baseInfo.projectStage || baseInfo.peStage || 'reserve'
  newStage.value = baseInfo.projectStage || baseInfo.peStage || 'reserve'
}

defineExpose({
  inputData,
  getSubmitData,
})

const getDisabled = (key) => {
  if (oldStage.value === 'reserve') {
    return key === 'manage'
  } else if (oldStage.value === 'implement') {
    return key === 'reserve'
  } else {
    return key !== 'manage'
  }
}
const disabled = computed(() => {
  return !!props.status
})
</script>

<template>
  <div>
    <div class="fill-title">
      {{ year }}年{{ month }}月{{ regionName }}城市更新月报表
    </div>
    <div class="fill-remark">
      <span> 填报单位： {{ regionName }}住房和建设委员会 </span>
      <template v-if="false">
        <span>填报人员：{{ userName }}</span>
        <span>填报时间：{{ time }}</span>
      </template>
    </div>
    <div class="fill-table">
      <div class="base">
        <common-base-info-table
          :base-info-table-props="baseInfoTableProps"
          :border="true"
          :column="2"
          ref="baseInfoTableRef"
          :disabled="disabled"
        >
          <template #projectStage>
            <el-radio-group v-model="newStage" :disabled="disabled">
              <el-radio
                v-for="item in stageOptions"
                :label="item.value"
                :key="item.value"
                :disabled="getDisabled(item.value)"
              >
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </template>
        </common-base-info-table>
      </div>
      <div class="other">
        <common-other-info-table
          title="入统项目完成情况"
          :other-info-table-props="integrationProjectTableProps"
          ref="projectCompleteInfoTableRef"
          :disabled="disabled"
        />
        <common-other-info-table
          title="项目融资-银行授权"
          :other-info-table-props="bankAuthorizationTableProps"
          ref="bankInfoTableRef"
          :disabled="disabled"
        />
        <common-other-info-table
          title="项目融资-其他融资"
          :other-info-table-props="otherFinancingTableProps"
          ref="financeInfoTableRef"
          :disabled="disabled"
        />
        <common-other-info-table
          title="问题及建议"
          :other-info-table-props="suggestionTableProps"
          ref="problemInfoTableRef"
          :disabled="disabled"
        />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.fill-title {
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
}

.fill-remark {
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}
</style>
